<template>
    <div class="app-container">
      <h1 class="center-title">填报基础信息</h1>
      <el-form :model="newStudent" :rules="rules" ref="newStudentForm" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12" class="right-column">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="newStudent.name" class="uniform-input"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="newStudent.gender" placeholder="请选择性别" class="uniform-input">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="right-column">
            <el-form-item label="出生年月" prop="birthDate">
              <el-date-picker
                v-model="newStudent.birthDate"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                class="uniform-input">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="入学时间" prop="enrollmentDate">
              <el-date-picker
                v-model="newStudent.enrollmentDate"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                class="uniform-input">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="right-column">
            <el-form-item label="生源地区" prop="nativePlace">
              <el-input v-model="newStudent.nativePlace" class="uniform-input"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="通讯地址" prop="contactAddress">
              <el-input v-model="newStudent.contactAddress" class="uniform-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="right-column">
            <el-form-item label="政治面貌" prop="politicalStatus">
              <el-select v-model="newStudent.politicalStatus" placeholder="请选择政治面貌" class="uniform-input">
                <el-option label="共青团员" value="共青团员"></el-option>
                <el-option label="中共党员" value="中共党员"></el-option>
                <el-option label="中共预备党员" value="中共预备党员"></el-option>
                <el-option label="群众" value="群众"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="健康状况" prop="healthStatus">
              <el-select v-model="newStudent.healthStatus" placeholder="请选择健康状况" class="uniform-input">
                <el-option label="健康" value="健康"></el-option>
                <el-option label="亚健康" value="亚健康"></el-option>
                <el-option label="疾病" value="疾病"></el-option>
                <el-option label="残疾" value="残疾"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="right-column">
            <el-form-item label="学校" prop="university">
              <el-input v-model="newStudent.university" class="uniform-input"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="专业" prop="major">
              <el-input v-model="newStudent.major" class="uniform-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="right-column">
            <el-form-item label="学院" prop="college">
              <el-input v-model="newStudent.college" class="uniform-input"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmAddStudent" class="right-align">确定</el-button>
      </span>
    </div>
  </template>
  
  <script>
  import { saveOrUpdateStudent, getStudentById } from '@/api/student/student';
  
  export default {
    data() {
      return {
        newStudent: {
          userId: this.$store.state.user.id, // 默认填充当前用户的 userId
          name: '',
          gender: '',
          university: '',
          major: '',
          college: '',
          birthDate: '',
          politicalStatus: '',
          healthStatus: '',
          nativePlace: '',
          enrollmentDate: '',
          contactAddress: ''
        },
        rules: {
          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
          university: [{ required: true, message: '请输入学校', trigger: 'blur' }],
          major: [{ required: true, message: '请输入专业', trigger: 'blur' }],
          college: [{ required: true, message: '请输入学院', trigger: 'blur' }],
          birthDate: [{ required: true, message: '请选择出生年月', trigger: 'change' }],
          enrollmentDate: [{ required: true, message: '请选择入学时间', trigger: 'change' }]
        }
      };
    },
    created() {
      const studentId = this.$store.state.user.id; // 假设通过 URL 参数传递学生 ID
      if (studentId) {
        this.fetchStudent(studentId);
      }
    },
    methods: {
      async fetchStudent(id) {
        try {
          const response = await getStudentById(id);
          Object.assign(this.newStudent, response.data);
        } catch (error) {
          this.$message.error('获取学生信息失败');
        }
      },
      confirmAddStudent() {
        this.$confirm('确认提交吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.addStudent();
        }).catch(() => {
          this.$message.info('已取消提交');
        });
      },
      addStudent() {
        this.$refs.newStudentForm.validate(async valid => {
          if (valid) {
            try {
              await saveOrUpdateStudent(this.newStudent);
              this.$message.success('学生信息保存成功');
            } catch (error) {
              this.$message.error('学生信息保存失败');
            }
          } else {
            return false;
          }
        });
      }
    }
  };
  </script>
  
  <style scoped>
  /* 可以在这里添加一些样式 */
  .app-container {
    padding: 20px;
  }
  
  .center-title {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .el-form-item__label {
    text-align: right;
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  
  .el-col {
    padding-right: 10px;
    padding-left: 10px;
  }
  
  .right-column {
    padding-right: 30px; /* 增加右侧内边距 */
  }
  
  .uniform-input {
    width: 100%;
  }
  
  .action-button {
    color: #409EFF; /* 设置为蓝色字体 */
    cursor: pointer;
    text-decoration: underline;
    margin-right: 10px;
    border: none;
    background-color: transparent;
  }
  
  .delete-button {
    color: #F56C6C; /* 设置为红色字体 */
  }
  
  .action-button:hover {
    text-decoration: none;
  }
  
  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
  
  .right-align {
    margin-left: auto;
  }
  </style>
  